<template>
	<view>
		<view class="top_bar">
			<view :class="['btn',{active: index == activeIndex}]" v-for="(item,index) in topBar" :key='item.id' @tap="changeTopBar(item)">
				{{item.name}}
			</view>
		</view>
		<view class="order_contain" v-if="nowShowGoodList.length">
			<OrderList v-for="item in nowShowGoodList" :orderListProp="item.items" :orderBaseProp="item.order" :tarType="typeProp">

				<template v-slot:returnGood="goodIndex">
					<view class="returnGood" v-if="item.order.status != 2">
						<navigator v-if="option.type === 'shipments' " :url="returnGoodsUrl(item,goodIndex)" class="returnGoodT">
							退货
						</navigator>
					</view>
					<view class="returnGood inReturn" v-else>
						退货中
					</view>
				</template>
				<template v-slot:btn_bar>
					<view>
						<view class="btn_bar" v-if="option.type=== 'willpay'">
							<view class="channel_btn" @tap="channel(item)">
								取消订单
							</view>
							<view class="channel_btn" @tap="pay(item)">
								付款
							</view>
						</view>
						<view class="btn_bar" v-if="option.type=== 'shipments'">
							<view class="channel_btn" @tap="confirmReceipt(item)">
								确认收货
							</view>
						</view>
					</view>
				</template>
			</OrderList>
		</view>
		<view v-else>
			暂无数据
		</view>
	</view>
</template>

<script>
	import request from '../../../api/request.js';
	import OrderList from '../../../components/orderList.vue';
	export default {
		data() {
			return {
				activeIndex: 0,
				topBar: [{
					id: 0,
					name: "待付款",
					isActive: true,
					type: "willpay"
				}, {
					id: 1,
					name: "已付款",
					isActive: false,
					type: "havepay"
				}, {
					id: 2,
					name: "已发货",
					isActive: false,
					type: "shipments"
				}, {
					id: 3,
					name: "已收货",
					isActive: false,
					type: "received"
				}, {
					id: 4,
					name: "申请退款",
					isActive: false,
					type: "applicationDrawback"
				}, ],
				// 当前展示的商品列表
				nowShowGoodList: [],
				// 所有订单
				allOrderList: [],
				orderReturnApplys: [],
				option: {},
				typeProp: ''
			};
		},
		methods: {
			async initInfo() {

				// 先将组件中有的内容清空
				this.nowShowGoodList = []

				// 初始化tarbar
				this.topBar.forEach((item1, index1) => {
					if (item1.type == this.option.type) {
						this.activeIndex = index1
					}
				})

				const res1 = await request({
					url: '/order/findAllOrders'
				});

				const allOrderList = res1.data.data.orderList || [];
				const res2 = await request({
					url: '/orderReturn/orderReturnApplys'
				})
				const orderReturnApplys = res2.data.data.items || [];

				// 处理传递给组件的type
				if (this.option.type == 'applicationDrawback') {
					this.typeProp = 'applicationDrawback'
				} else {
					this.typeProp = ''
				}

				switch (this.option.type) {
					case "willpay":
						this.nowShowGoodList = allOrderList.filter(item => {
							return item.order.status == 0
						})
						break;
					case "havepay":
						this.nowShowGoodList = allOrderList.filter(item => {
							return item.order.status == 1
						})
						break;
					case "shipments":
						this.nowShowGoodList = allOrderList.filter(item => {
							return item.order.status == 2
						})
						console.log(this.nowShowGoodList);
						break;
					case "received":
						this.nowShowGoodList = allOrderList.filter(item => {
							return item.order.status == 3
						})
						break;
					case "applicationDrawback":
						this.nowShowGoodList = [];
						orderReturnApplys.forEach(item => {
							const obj = {
								items: [{
									productPic: item.productPic,
									productName: item.productName,
									productPrice: item.productCount,
									productSn: item.id,
									productAttr: item.productAttr,
								}],
								order: {
									orderSn: item.orderSn,
									status: item.status,
									totalAmount: item.returnAmount
								}
							};
							this.nowShowGoodList.push(obj);

						})
						break;
				}
			},
			async channel(item) {
				const orderId = item.order.id;
				const res = await request({
					url: `/order/cancelOrder/${orderId}`,
					method: "post"
				});
				if (res.data.success) {
					uni.showToast({
						title: "取消订单成功"
					})
				} else {
					uni.showToast({
						title: "取消订单失败"
					})
				}
				this.initInfo()
			},
			async pay(item) {
				const orderId = item.order.id;
				uni.navigateTo({
					url: `../../pay/pay?id=${orderId}`
				})
			},
			changeTopBar(item) {
				this.option.type = item.type;
				this.initInfo();
			},
			// 确认收货
			async confirmReceipt(item) {
				const res = await request({
					url: '/order/receiveDone',
					method: 'post',
					data: {
						orderId: item.items[0].orderId
					}
				})
				if (res.data.success) {
					uni.showToast({
						title: '收货成功'
					})
				}
				this.initInfo()
			}

		},
		onLoad(option) {
			this.option = option;
			this.initInfo();
		},
		components: {
			OrderList
		},
		computed: {
			returnGoodsUrl() {
				return function(item,goodIndex) {
					const index = goodIndex.goodIndex.index;
					const orderId = item.items[index].orderId;
					const orderSn = item.items[index].orderSn;
					return `./returnGoods/returnGoods?id=${orderId}&orderSn=${orderSn}&index=${index}`
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-top: 80rpx;
	}

	.top_bar {
		position: fixed;
		top: var(--window-top);
		z-index: 100;
		display: flex;
		justify-content: space-between;
		color: #fff;
		text-align: center;
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		font-size: $uni-font-size-base;
		background-color: $themeColor;

		.btn {
			flex: 1;

			&.active {
				color: #f00;
			}
		}
	}

	.btn_bar {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		font-size: $uni-font-size-sm;

		view {
			padding: 6rpx 14rpx;
			border-radius: 10rpx;
			color: $themeColor;
			margin: 0 20rpx;
			border: 2rpx solid $themeColor;
		}
	}

	.returnGood {
		text-align: right;
		font-size: $uni-font-size-24;
		&.inReturn {
			color: #f00;
		}
		.returnGoodT {
			width: 50rpx;
			display: inline-block;
			position: relative;
			box-sizing: content-box;
			text-align: center;
			padding: 10rpx 20rpx;
			border-bottom: 3rpx solid #999;
		}
	}
</style>
